<template>
  <div>
    <!-- 第一行头部 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="time">
            <span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.2);">{{ nnow }}</span>
            <span style="font-size: 16px; display:inline-block; margin-top:10px; padding-left:10px"> {{ ndate }} </span>
            <br>
            <span style="font-size: 16px; display:inline-block; margin-top:5px; padding-left:10px">星期{{ nweek }}</span>
            <!-- <span style="font-size: 50px;  text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.2); margin-left: 400px;"> 莱尼尔办公室</span> -->
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行  包括表格和仪表盘 -->

    <el-row>
      <!-- 表格 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }" border
            style="width: 90% ;margin:0 auto; margin-top: 160px;" :cell-style="{ textAlign: 'center' }">
            <!-- :header-cell-style="{ background: '#6eaef5', color: '#ffffff' }" -->
            <el-table-column prop="maxTemperature" label="最高温度 (℃)">
            </el-table-column>
            <el-table-column prop="minTemperature" label="最低温度 (℃)">
            </el-table-column>
            <el-table-column prop="maxOfficeHumidity" label="最高湿度 (%)">
            </el-table-column>
            <el-table-column prop="minOfficeHumidity" label="最低湿度 (%)">
            </el-table-column>
            <el-table-column prop="averageTemperature" label="平均温度 (℃)">
            </el-table-column>
            <el-table-column prop="averageHumidity" label="平均湿度 (%)">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <!-- 仪表盘 -->
      <el-col :span="12">
        <div class="grid-content bg-purple-light rig">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div id="main3"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <div id="main4"></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark"><span>当前温度和湿度的采集时间为：{{ nowTime }}</span></div>
            </el-col>
          </el-row>


        </div>
      </el-col>
    </el-row>
    <hr>
    <el-row>
            <!-- 第二行查询 -->
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="block">
                        <el-date-picker clearable value-format="yyyy/MM/dd" v-model="date" type="date"
                            placeholder="选择日期" :picker-options="expireTimeOPtion">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" style="margin-left: 20px"  @click="getL">查询</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    <p style="text-align:center;font-size:30px">86盒液晶集成测温湿度</p>
    <!-- 第三行 折线图 -->
    <el-row>
      <div style="margin-top:100px">
        <el-col :span="12">
          <!--86盒温度  状态表格 -->
          <el-table
    :data="tableData3"
    border
    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 50%; margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      style="backgroubd:red"
      
     >
     <!-- <template slot-scope="scope">       
        		 判断返回值是正数百分比&&只判断后面两行--字体绿色+上升箭头
                <span style="color: green" v-if="deviceState=='正常'"></span>
                 判断返回值负数百分比&&只判断后面两行--字体红色+下降箭头
                <span style="color: red" v-else-if="parseFloat(scope.row[scope.column.property]) < 0 && (scope.row.name == '同比增幅' || scope.row.name == '环比增幅')">{{scope.row[scope.column.property]}}↓</span>
                 其他情况不加修饰
                <span v-else>{{scope.row[scope.column.property]}}</span>
        </template> -->

    </el-table-column>
  </el-table>
          <div class="grid-content bg-purple">
            <div id="main" style="width: 90%;height:400px;  margin: auto;padding-left: 40px; "></div>
          </div>
        </el-col>
        <el-col :span="12">
           <!-- 86盒湿度  状态表格 -->
           <el-table
    :data="tableData4"
    border
    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 50%; margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
    
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
          <div class="grid-content bg-purple-light">
            <div id="main1" style="width: 90%;height:400px;  "></div>
          </div>
        </el-col>
      </div>
    </el-row>
    <hr>
    <p style="text-align:center;font-size:30px" >百叶箱集成测温湿度</p>
    <!-- 第四行 百叶箱折线图 -->
    <el-row>
      <div style="margin-top:100px">
        <el-col :span="12">
           <!-- 百叶箱集成式传感器温度  状态表格 -->
           <el-table
    :data="tableData1"
    border
    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 50%; margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
          <div class="grid-content bg-purple">
            <div id="louver" style="width: 90%;height:400px;margin: auto;padding-left: 40px;   "></div>
          </div>
        </el-col>
        <el-col :span="12">
           <!-- 百叶箱集成式传感器湿度  状态表格 -->
           <el-table
    :data="tableData2"
    border
    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 50%; margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
          <div class="grid-content bg-purple-light">
            <div id="louver1" style="width: 90%;height:400px; "></div>
          </div>
        </el-col>
      </div>
    </el-row>
    <hr>
    <p style="text-align:center;font-size:30px">pt100集成测温度</p>
    <!-- 第五行，pt100测温湿度 -->
    <el-row>
            <el-col :span="24">
               <!-- pt100温度  状态表格 -->
          <el-table
    :data="tableData5"
    border
    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
    :cell-style="{ textAlign: 'center' }"
    style="width: 30%; margin:50px auto;"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="limitName"
      label="设备名称"
      
     >
    </el-table-column>
    <el-table-column
      prop="deviceState"
      label="设备状态"
      
     >
    </el-table-column>
  </el-table>
                <div class="grid-content bg-purple">
                    <div id="pt100" ref="pt100" style="width: 100%;height:400px;  "></div>
                </div>
            </el-col>

        </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getTEP, gethumitureData, getptTempList, getlouverHumitureList,getStateList } from '@/api/system/temp.js'


export default {
  data() {
    return {
      tableData1:[],
      tableData2:[],
      tableData3:[],
      tableData4:[],
      tableData5:[],
      tableData:[],
      date: this.getNow(),
      tableData: [],
      nowTime: '',
      newTime: "",
      nowTime: '',
      ndate: '',
      nnow: '',
      nweek: '',
      selectTime:'',
      expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
    }
  },
  mounted() {
   
    this.getNowTime()
    this.gettable()
    this.gettem()
    this.getlouver()
    this.getpt()
    this.State()
    //进入页面调用该方法获取当前时间
    //销毁之前定时器
    clearInterval(myTimeDisplay,MyState);
    var myTimeDisplay = setInterval(() => {
      this.getNowTime();
      //每秒更新一次时间
    }, 1000);
   
    var MyState = setInterval(() => {
      this.State()
      
    }, 600000);

   
   
  },
  methods: {
    //    查询按钮使用
    getL() {
            this.gettem()
            this.getlouver()
            this.getpt()
            // this.getNow()
        },
    // 第一行，当前时间
    getNowTime() {
      var date = new Date();
      var data1 = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ';
      var now = this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds());
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      var time = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ' + this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds()) + '' + '星期' + week;
      this.newTime = time;
      this.ndate = data1;
      this.nnow = now;
      this.nweek = week;
    },
    //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? ('0' + s) : s;
    },
    // 第二行，表格和仪表盘
    gettable() {
      gethumitureData().then(res => {
        this.tableData = res.data;
        // console.log(res);
        var chartDom3 = document.getElementById('main3');
        var chartDom4 = document.getElementById('main4');
        var myChart3 = echarts.init(chartDom3);
        var myChart4 = echarts.init(chartDom4);

        let option3 = {

          // color: ["rgba(255,255,255,0)", "rgb(0, 224, 151)", "rgb(8, 48, 63)"], //  进度条颜色 进度条背景颜色
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          title: {

          },
          series: [
            {
              min: 0,
              max: 60,
              name: 'Pressure',
              type: 'gauge',
              pointer: {
                width: 5
              },
              itemStyle: {
                color: 'rgb(250,119,86)',
              },

              axisLine: {            // 坐标轴线  
                lineStyle:
                {       // 属性lineStyle控制线条样式  
                  color: [[1, 'rgb(230,235,248)']],
                  //  外框的大小（环的宽度）
                  width: 10
                }
              },

              progress: {
                // width:10,
                iitemStyle: {
                  color: 'black',
                },
                show: true,

              },
              detail: {
                valueAnimation: true,
                formatter: '{value}℃'
              },
              data: [
                {
                  value: res.data[0].officeTemperature,
                  name: '温度',
                  detail: {
                    // fontWeight: "lighter",
                    fontSize: 18
                  }
                }
              ]
            }
          ]


        }

        // ===================================

        let option4 = {

          // color: ["rgba(255,255,255,0)", "rgb(0, 224, 151)", "rgb(8, 48, 63)"], //  进度条颜色 进度条背景颜色
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              min: 20,
              max: 80,
              name: 'Pressure',
              type: 'gauge',
              pointer: {
                width: 5
              },
              itemStyle: {
                color: 'rgb(84,112,198)',
              },

              axisLine: {            // 坐标轴线  
                lineStyle:
                {       // 属性lineStyle控制线条样式  
                  color: [[1, 'rgb(230,235,248)']],
                  //  外框的大小（环的宽度）
                  width: 10
                }
              },

              progress: {
                // width:10,
                iitemStyle: {
                  color: 'black',
                },
                show: true,

              },
              detail: {
                valueAnimation: true,
                formatter: '{value}%',

              },
              data: [
                {
                  value: res.data[0].officeHumidity,
                  name: '湿度',
                  detail: {
                    // fontWeight: "lighter",
                    fontSize: 18
                  }
                }
              ]
            }
          ]


        }
        option3 && myChart3.setOption(option3);
        option4 && myChart4.setOption(option4);
        window.addEventListener("resize", function () {
          myChart3.resize();
          myChart4.resize();
        });
        // console.log(res);
        this.nowTime = res.data[0].recordTime
        // console.info("banben",echarts.version);

      })

    },
    // 第三行温湿度曲线
    gettem() {
      getTEP(this.date).then(res => {
        
        var chartDom = document.getElementById('main');
        var chartDom1 = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var myChart1 = echarts.init(chartDom1);
        let option = {
          // backgroundColor: 'rgba(250, 251, 252, 1)',
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日温度变化曲线图',
            // left: 'center',


          },
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            // backgroundColor: 'rgba(32, 33, 36,.7)',
            // borderColor: 'rgba(32, 33, 36,0.20)',
            // borderWidth: 1,
            // // 文字提示样式
            // color: '#fff',
            // fontSize: '12',


          },

          // 维度
          legend: {
            orient: 'vertical',
            data: ['温度(℃)'],

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {
              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '温度(℃)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[0],
            label: {
              color: 'black',

              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              //  normal : {
              //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //       offset: 0,
              //       color: '#ad91ed'
              //     },
              //     {
              //       offset: 0.9,
              //       color: '#c8eeeb'
              //     }]),
              //     areaStyle: {

              //       type: 'default'
              //     }
              //   }
            },

          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        let option1 = {
          // backgroundColor: 'rgba(250, 251, 252, 1)',
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日湿度变化曲线图',
            // left: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 维度
          legend: {
            orient: 'vertical',
            // x:'70',
            // y:'50',
            data: ['湿度(%)'],

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {

              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '湿度(%)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            // 平均的线
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            // 最大最小值高亮
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[1],
            label: {

              color: 'black',
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              // normal: {

              //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //     offset: 0,
              //     color: '#2FE0D4'
              //   },
              //   {
              //     offset: 0.9,
              //     color: '#c37fee'
              //   }]),
              //   areaStyle: {

              //     type: 'default'
              //   }
              // }
            }






          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        window.addEventListener("resize", function () {
          myChart.resize();
          myChart1.resize();
        });
        // myChart.setOption(option);
        option && myChart.setOption(option);
        option1 && myChart1.setOption(option1);
        // console.log(res)
      })
    },
    // 第四行百叶箱温湿度曲线
    getlouver() {
      getlouverHumitureList(this.date).then(res => {
        // console.log(res);
        var chartDom = document.getElementById('louver');
        var chartDom1 = document.getElementById('louver1');
        var myChart = echarts.init(chartDom);
        var myChart1 = echarts.init(chartDom1);
        let option = {
          // backgroundColor: 'rgba(250, 251, 252, 1)',
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日温度变化曲线图',
            // left: 'center',


          },
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            // backgroundColor: 'rgba(32, 33, 36,.7)',
            // borderColor: 'rgba(32, 33, 36,0.20)',
            // borderWidth: 1,
            // // 文字提示样式
            // color: '#fff',
            // fontSize: '12',


          },

          // 维度
          legend: {
            orient: 'vertical',
            data: ['温度(℃)'],

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {
              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '温度(℃)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[0],
            label: {
              color: 'black',

              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              //  normal : {
              //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //       offset: 0,
              //       color: '#ad91ed'
              //     },
              //     {
              //       offset: 0.9,
              //       color: '#c8eeeb'
              //     }]),
              //     areaStyle: {

              //       type: 'default'
              //     }
              //   }
            },

          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        let option1 = {
          // backgroundColor: 'rgba(250, 251, 252, 1)',
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日湿度变化曲线图',
            // left: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 维度
          legend: {
            orient: 'vertical',
            // x:'70',
            // y:'50',
            data: ['湿度(%)'],

          },
          // x轴
          xAxis: {
            data: res.data[2]
          },
          // y轴
          yAxis: {

          },
          grid: [
            {

              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '湿度(%)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            // 平均的线
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            // 最大最小值高亮
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[1],
            label: {

              color: 'black',
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              // normal: {

              //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //     offset: 0,
              //     color: '#2FE0D4'
              //   },
              //   {
              //     offset: 0.9,
              //     color: '#c37fee'
              //   }]),
              //   areaStyle: {

              //     type: 'default'
              //   }
              // }
            }






          }],
          // 使用刚指定的配置项和数据显示图表。

        };
        window.addEventListener("resize", function () {
          myChart.resize();
          myChart1.resize();
        });
        option && myChart.setOption(option);
        option1 && myChart1.setOption(option1);
      })
    },
    // 第五行温度折线pt100
    getpt() {
      getptTempList(this.date).then(res => {
        // console.log(res);
        // var chartTp1 = document.getElementById('pt1');

        // var myCharttp1 = echarts.init(chartTp1);
       
        var myCharttp1;
        if (this.myCharttp1 != null && this.myCharttp1!= "" && this.myCharttp1!= undefined) {
this.myCharttp1.dispose();
}
       myCharttp1 = echarts.init(this.$refs.pt100);
        let optiontp1 = {
                    // backgroundColor: 'rgba(250, 251, 252, 1)',
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                    ],
                    // 图表标题
                    title: {
                        // text: '百叶箱采集光照',
                        // // left: 'center',
                        // top:'10%'


                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        // backgroundColor: 'rgba(32, 33, 36,.7)',
                        // borderColor: 'rgba(32, 33, 36,0.20)',
                        // borderWidth: 1,
                        // // 文字提示样式
                        // color: '#fff',
                        // fontSize: '12',


                    },

                    // 维度
                    legend: {
                        orient: 'vertical',
                        data: ['温度(℃)'],

                    },
                    // x轴
                    xAxis: {
                        data: res.data[1]
                    },
                    // y轴
                    yAxis: {

                    },
                    grid: [
                        {
                            top: '30%',
                            // bottom: '30%'
                        },
                    ],
                    series: [{
                        // 与标题一致
                        name: '温度(℃)',
                        // 图表类型
                        type: 'line',
                        // showSymbol: false,
                        //   markLine: {
                        //   data: [{ type: "average", name: "Avg" }],
                        // },
                        markPoint: {
                            data: [
                                { type: "max", name: "Max" },
                                { type: "min", name: "Min" },
                            ],
                        },
                        //数据内容 
                        data: res.data[0],
                        label: {
                            color: 'black',

                            formatter: function (params) {
                                return (params.value)
                            },
                            // show: true // 在折线拐点上显示数据
                        },
                        lineStyle: {
                            //  normal : {
                            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            //       offset: 0,
                            //       color: '#ad91ed'
                            //     },
                            //     {
                            //       offset: 0.9,
                            //       color: '#c8eeeb'
                            //     }]),
                            //     areaStyle: {

                            //       type: 'default'
                            //     }
                            //   }
                        },

                    }],
                    // 使用刚指定的配置项和数据显示图表。

                };

        // myChart.setOption(option);

        window.onresize = myCharttp1.resize
        
      optiontp1 && myCharttp1.setOption(optiontp1);
       

        // console.log(res)
      })
    },
    // 当前时间
    getNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
            return data1
        },
// 设备状态接口
State(){
  // 百叶箱温度
  getStateList(1).then(res=>{
    // console.log(res);
    this.tableData1=res.data
   
  }),
  // 百叶箱湿度
  getStateList(2).then(res=>{
    // console.log(res);
    this.tableData2=res.data
 
  }),
  // 86盒温度
  getStateList(9).then(res=>{
    // console.log(res);
    this.tableData3=res.data
    
  }),
  // 86盒湿度
  getStateList(10).then(res=>{
    // console.log(res);
    this.tableData4=res.data
    
  }),
  //pt100温度
  getStateList(4).then(res=>{
    // console.log(res);
    this.tableData5=res.data
    
  })
},
tableRowClassName({row, rowIndex,}) {
  // console.log(row);
        if (row.deviceState != '正常') {
          return 'warning-row';
        } else {
          return '';
        }
       
      }
// setState(){
// this.State()
// }
  }
}
</script>

<style lang="scss" scoped >
.block {
    // border: 1px red solid;
    // height: 200px;
    float: right;
    margin-right: 150px;
    margin-top: 20px;
}
#main3,
#main4 {
  width: 400px;
  height: 400px;
  margin: auto;
  margin-top: 40px;

}

.rig span {
  // border: 2px red solid;  
  font-size: 25px;
  display: inline-block;
  padding-left: 160px;
  margin-top: -100px;
  position: relative;
  top: -50px;
  //  text-align-last: justify;


}

::v-deep.el-table .warning-row {
    // background: rgb(228, 46, 46); 
    color: red;
    
  }
  ::v-deep.el-table .success-row {
    background: #73e436;
  }

//  .el-row {
//     margin-bottom: 20px;
//     &:last-child {
//       margin-bottom: 0;
//     }
//   }
// .el-col {
//   border-radius: 4px;
// }
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
// .grid-content {
//   border: 1px red solid;
//   // border-radius: 4px;
//   // min-height: 36px;
// }

// .row-bg {
//   padding: 10px 0;
//   background-color: #f9fafc;
// }
</style>